<template>
  <div class="app-container">
    <div class="footer">
      <div class="util" v-if="auth && (auth.add || auth.delete)">
        <el-button
          type="danger"
          @click="delCheck"
          v-show="selectList && selectList.length > 0"
          v-if="auth.delete"
        >
          <el-icon><Delete /></el-icon>
          删除选中
        </el-button>
        <el-button type="primary" @click="addHandler" v-if="auth.add">
          <el-icon><Plus /></el-icon>
          新增用户
        </el-button>
      </div>
      <div class="table-inner">
        <el-table
          v-loading="loading"
          row-key="id"
          :data="list"
          style="width: 100%"
          border
          @selection-change="handleSelectionChange"
        >
          <template #empty>
            <el-empty description="暂无数据" />
          </template>
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column prop="username" label="用户名称" align="center" />
          <el-table-column prop="phone" label="手机号" align="center" />
          <el-table-column
            prop="remark"
            :show-overflow-tooltip="true"
            label="备注"
            align="center"
          />
          <el-table-column prop="create_time" label="创建时间" align="center" />
          <el-table-column prop="operator" label="操作" width="200" align="center">
            <template #default="scope">
              <el-button
                type="primary"
                size="small"
                icon="Edit"
                @click="editHandler(scope.row)"
                v-if="auth && auth.edit"
              >
                编辑
              </el-button>
              <el-button
                type="danger"
                size="small"
                icon="Delete"
                @click="del(scope.row)"
                v-if="auth && auth.delete"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination">
        <el-pagination
          v-model:currentPage="query.page"
          :page-size="10"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <UserDialog ref="userDialog" @refresh="getList()" />
  </div>
</template>

<script lang="ts" setup>
import { system, systemDelete } from '@/api/admin'
import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'
import { nextTick, reactive, ref } from 'vue'
import UserDialog from './components/UserDialog.vue'

const loading = ref(false)
const list = ref()
const total = ref(0)
const query = reactive({
  page: 1,
  limit: 10,
})
const auth = ref()
const userDialog = ref()
const selectList = ref()
const getList = () => {
  loading.value = true
  system(query).then((res) => {
    if (res.code == 200) {
      auth.value = res.data.auth
      list.value = res.data.data
      total.value = res.data.count
    }
    loading.value = false
  })
}
const handleSizeChange = (val) => {
  query.page = 1
  query.limit = val
  getList()
}
const handleCurrentChange = (val) => {
  query.page = val
  getList()
}
const addHandler = () => {
  userDialog.value.show()
}
const editHandler = (row) => {
  userDialog.value.show(row)
}
const del = (row) => {
  ElMessageBox.confirm(`你确定要删除用户"${row.username}"吗?`, '温馨提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
    draggable: true,
  }).then(() => {
    systemDelete({ id: row.id }).then((res) => {
      if (res.code == 200) {
        ElNotification({
          title: res.data,
          message: res.msg,
          type: 'success',
        })
        getList()
      }
    })
  })
}
const handleSelectionChange = (val) => {
  selectList.value = val
}
const delCheck = () => {
  ElMessageBox.confirm(`你确定要删除选中的角色吗?`, '温馨提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
    draggable: true,
  }).then(() => {
    let ids = []
    selectList.value.forEach((item) => {
      ids.push(item.id)
    })
    systemDelete({ id: ids }).then((res) => {
      if (res.code == 200) {
        ElNotification({
          title: res.data,
          message: res.msg,
          type: 'success',
        })
        getList()
      }
    })
  })
}

nextTick(() => {
  getList()
})
</script>

<style scoped lang="scss">
@import './index';
</style>
